<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
      <el-form-item label="企业名称" prop="tenantId">
        <el-select filterable v-model="queryParams.tenantId" @change="getSubtenantList" placeholder="请选择企业名称" clearable
                   size="small"
        >
          <el-option v-for="dict in tenantList" :key="parseInt(dict.id)" :label="dict.name" :value="dict.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="分公司名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入分公司名称" clearable/>
        <!-- <el-select v-model="queryParams.subtenantId" placeholder="请选择分公司名称" clearable size="small">
          <el-option v-for="dict in subtenantList" :key="parseInt(dict.id)" :label="dict.name" :value="dict.id" />
        </el-select> -->
      </el-form-item>
      <el-form-item label="公司编码" prop="code">
        <el-input v-model="queryParams.code" placeholder="请输入商户编码" clearable/>
      </el-form-item>
      <el-form-item label="订单结款方式" prop="payMethod">
        <el-select v-model="queryParams.payMethod" placeholder="请选择订单结款方式" clearable size="small">
          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.payment_method)" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="getTableData">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button plain type="primary" icon="el-icon-plus" size="small" @click="openDialog">新增</el-button>
      </el-col>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getTableData"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="tableData">
      <el-table-column label="操作" align="center" fixed="left" width="100">
        <template v-slot="scope">
          <el-button icon="el-icon-edit" size="small" type="text" @click="handleUpdate(scope.row)">编辑
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="分公司名称" prop="name" align="center" fixed="left"/>
      <el-table-column label="分公司编码" prop="code" align="center"/>
      <el-table-column label="所属企业" prop="tenantName" align="center"/>
      <el-table-column label="联系人" prop="userName" align="center"/>
      <el-table-column label="联系方式" prop="phone" align="center"/>
      <el-table-column label="邮箱" prop="email" align="center"/>
      <el-table-column label="订单结款方式" align="center" prop="payMethod">
        <template v-slot="scope">
          <dict-tag :type="DICT_TYPE.payment_method" :value="scope.row.payMethod"/>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" prop="updateTime" align="center">
        <template v-slot="scope">
          <span>{{ parseTime(scope.row.updateTime) }}</span>
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="getTableData"
    />

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="900px" v-dialogDrag append-to-body>
      <el-form :model="dialogParams" ref="dialogParams" :inline="true" :rules="rules" label-width="140px">
        <el-form-item label="商户类型">
          <el-input :value="'企业'" :disabled="true" placeholder="请输入商户名称" style="width: 240px" clearable/>
        </el-form-item>
        <el-form-item label="所属企业" prop="tenantId">
          <el-select style="width: 240px" v-model="dialogParams.tenantId" @change="tenantChange" placeholder="请选择所属企业"
                     clearable size="small"
          >
            <el-option v-for="dict in tenantList" :key="parseInt(dict.id)" :label="dict.name" :value="dict.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="分公司名称" prop="name">
          <el-input v-model="dialogParams.name" placeholder="请输入分公司名称" style="width: 240px" clearable/>
        </el-form-item>
        <el-form-item label="分公司地址" prop="address">
          <el-input v-model="dialogParams.address" placeholder="请输入分公司地址" style="width: 240px" clearable/>
        </el-form-item>
        <el-form-item label="统一社会信用代码" prop="creditCode">
          <el-input v-model="dialogParams.creditCode" placeholder="请输入统一社会信用代码" style="width: 240px" clearable
                    maxlength="20"
          />
        </el-form-item>
        <el-form-item label="营业执照" prop="licence">
          <imageUpload :limit="1" v-model="dialogParams.licence"/>
        </el-form-item>
        <el-form-item label="联系人" prop="userName">
          <el-input v-model="dialogParams.userName" placeholder="请输入联系人" style="width: 240px" clearable/>
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="dialogParams.phone" placeholder="请输入联系方式" style="width: 240px" clearable maxlength="11"/>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="dialogParams.email" placeholder="请输入邮箱" style="width: 240px" clearable/>
        </el-form-item>
        <el-form-item label="账户名" prop="accountName">
          <el-input v-model="dialogParams.accountName" placeholder="请输入账户名" style="width: 240px" clearable/>
        </el-form-item>
        <el-form-item label="账号" prop="account">
          <el-input v-model="dialogParams.account" placeholder="请输入账号" style="width: 240px" clearable/>
        </el-form-item>
        <el-form-item label="开户行" prop="bank">
          <el-input v-model="dialogParams.bank" placeholder="请输入开户行" style="width: 240px" clearable/>
        </el-form-item>
        <el-form-item label="行号" prop="bankNo">
          <el-input v-model="dialogParams.bankNo" placeholder="请输入行号" style="width: 240px" clearable/>
        </el-form-item>
        <el-form-item label="订单结款方式" prop="payMethod">
          <el-radio-group v-model="dialogParams.payMethod">
            <el-radio placeholder="请输入订单结款方式"  clearable v-for="dict in this.getDictDatas(DICT_TYPE.payment_method)" :key="dict.value"
                      :label="parseInt(dict.value)">{{ dict.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div style="display: flex; justify-content: flex-end">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { businessListsAll, subtenantListsAll } from '@/api/merchantManagement/business'
import ImageUpload from '@/components/ImageUpload'
import ImagePreview from '@/components/ImagePreview'
import {
  getBranchComList,
  addBranchComInfo,
  updateBranchComInfo
} from '@/api/merchantManagement/branchCompany'
import { validMobile, validEmails,isValidBankCardNumber, isChineseChar } from '@/utils/validate'

export default {
  name: 'branchCompany',
  components: {
    ImageUpload,
    ImagePreview
  },
  data() {
    return {
      showSearch: true,
      tenantList: [],
      subtenantList: [],
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        name: null
      },
      total: 0,
      tableData: [],
      loading: false,
      dialogTitle: '新增',
      dialogVisible: false,
      dialogParams: {
        type: 1
      },
      rules: {
        payMethod: [
          { required: false, message: '请输入订单结款方式', trigger: 'blur' }
        ],
        tenantId: [
          { required: true, message: '请选择商户', trigger: 'change' }
        ],
        name: [{ required: true, message: '请输入分公司名称', trigger: 'blur' }],
        address: [
          { required: false, message: '请输入商户地址', trigger: 'blur' }
        ],
        licence: [
          { required: false, message: '请选择营业执照', trigger: 'change' }
        ],
        creditCode: [
          { required: false, message: '请输入统一社会信用代码', trigger: 'blur' }
          // { validator: validCreditCodeRule, trigger: "blur" },
        ],
        accountName: [
          { required: true, message: '请输入账户名', trigger: 'blur' },
          { validator: isChineseChar, trigger: 'blur' }
        ],
        account: [{ required: true, message: '请输入账号', trigger: 'blur' },
          { validator: isValidBankCardNumber, trigger: 'blur' }
        ],
        bank: [{ required: true, message: '请输入开户行', trigger: 'blur' },
          { validator: isChineseChar, trigger: 'blur' }
        ],
        bankNo: [
          { required: false, message: '请输入行号', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getTableData()
    this.getTenantList()
  },
  methods: {
    async getTableData() {
      this.loading = true
      const res = await getBranchComList(this.queryParams)
      this.loading = false
      this.tableData = res.data.list
      this.total = res.data.total
    },
    async getTenantList() {
      const res = await businessListsAll({ type: 1 })
      this.tenantList = res.data
    },
    async getSubtenantList() {
      const res = await subtenantListsAll({ tenantId: this.queryParams.tenantId })
      this.subtenantList = res.data
    },
    resetQuery() {
      this.queryParams = {
        pageNo: 1,
        pageSize: 10
      }
      this.getTableData()
    },
    // 根据商户查询营业执照和统一信用代码
    tenantChange(val) {
      let obj = this.tenantList.find(i => i.id == val)
      this.dialogParams.creditCode = obj.creditCode ? obj.creditCode : ''
      this.dialogParams.licence = obj.licence ? obj.licence : ''
    },
    /** 表单重置 */
    reset() {
      this.dialogParams = {
        pageNo: 1,
        pageSize: 10,
        id: undefined,
        tenantId: undefined,
        name: undefined,
        address: undefined,
        creditCode: undefined,
        licence: undefined,
        userName: undefined,
        phone: undefined,
        email: undefined,
        accountName: undefined,
        account: undefined,
        bank: undefined,
        bankNo: undefined,
        payMethod: undefined,
        type: 1
      }
      this.resetForm('dialogParams')
    },
    openDialog() {
      this.reset()
      this.dialogVisible = true
      this.dialogTitle = '新增'
      this.getTenantList()
    },
    handleConfirm() {
      this.$refs['dialogParams'].validate((valid) => {
        if (valid) {
          if (this.dialogParams.phone && !validMobile(this.dialogParams.phone)) {
            this.$message({
              message: '联系方式格式不正确',
              type: 'warning'
            })
            return
          }
          if (this.dialogParams.email && !validEmails(this.dialogParams.email)) {
            this.$message({
              message: '邮箱格式不正确',
              type: 'warning'
            })
            return
          }
          this.loading = true
          if (this.dialogParams.id) {
            updateBranchComInfo(this.dialogParams).then(res => {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.getTableData()
              this.dialogVisible = false
              this.loading = false
            }).catch(f => {
              this.loading = false
            })
          } else {
            addBranchComInfo(this.dialogParams).then(res => {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.getTableData()
              this.dialogVisible = false
              this.loading = false
            }).catch(f => {
              this.loading = false
            })
          }
        }
      })
    },
    handleUpdate(data) {
      this.reset()
      this.dialogVisible = true
      this.dialogParams = data
      this.dialogTitle = '编辑'
      this.getTenantList()
    }
  }
}
</script>

<style lang="less" scoped></style>
